<template>
	<transition name="slide-fade" appear>
		<div class="float-window" v-show="isVisible">
			<slot></slot>
		</div>
	</transition>
</template>

<script setup lang="ts">
//import {} from "vue"

//组件命名-----
defineOptions({ name: "xy-down-index" })
const props =
	withDefaults(defineProps<{
		isVisible?: boolean,//是否显示
	}>(), {
	})
</script>

<style lang="scss" scoped>
/* 可以设置不同的进入和离开动画   */
/* 设置持续时间和动画函数        */
.slide-fade-enter-active {
	transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
	transition: all 0.5s ease-in;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translateY(-10px);
	opacity: 0;
}

.float-window {
	width: fit-content;
	// /* 设置浮窗的样式 */
	position: absolute;
	z-index: 999;
	//可以通过外部传入 --down_right, --down_top 改变浮窗的位置
	right: var(--down_right, none); // top: 100%;
	top: var(--down_top, none);
}
</style>
